<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <meta name="wechat-enable-text-zoom-em" content="true">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
    <title>闪客的聊天室</title>
    <script>
        let nickname = '';
        var lastMessage = '';
        var nowMessage = '';
        let hotPeople = 0;
        const sensitiveWords = ['黄', '咪'];
        const sensitiveRegex = new RegExp(sensitiveWords.join('|'), 'i');

        window.onload = function () {
            checkNickname();
            refreshHotPeople();
            document.getElementById('nickInput').focus();
            document.getElementById('message').addEventListener('input', function() {
                const lineHeight = 20; // 根据 CSS 中的行高设置
                const maxRows = 5; // 最多显示的行数
                this.rows = 1; // 重置 rows 属性以获取准确的 scrollHeight
                const currentRows = Math.floor(this.scrollHeight / lineHeight) - 1;

                if (currentRows <= maxRows) {
                    this.rows = currentRows;
                } else {
                    this.rows = maxRows;
                    this.style.overflowY = "auto"; // 内容超过最大行数时显示滚动条
                }
            });
            document.addEventListener('keydown', function () {
                if (event.key === 'Enter' && !event.shiftKey) {
                    sendMessage();
                    scrollToBottom();
                    event.preventDefault();
                }
            })
        };

        function scrollToBottom() {
            var chatBox = document.getElementById('chatBox');
            chatBox.scrollTop = chatBox.scrollHeight;
            var adminChatBox = document.getElementById('adminChatBox');
            adminChatBox.scrollTop = adminChatBox.scrollHeight;
        }

        function enterChat() {
            nickname = document.getElementById('nickInput').value;
            if (nickname) {
                doEnterChat(nickname);
            }
        }

        function doEnterChat(nickname, type) {
            document.getElementById('nickname_page').style.display = 'none';
            document.getElementById('chatroom_page').style.display = 'block';
            word = '加入'
            if ('back' === type) {
                word = '回到'
            }
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'chat.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function () {
                if (this.status === 200) {
                    if ('chongfu' === this.responseText) {
                        alert('频繁加入')
                    }
                    fetchMessages();
                    fetchAdminMessages();
                    fetchAdminTongzhi();
                    setInterval(fetchMessages, 5000);
                    setInterval(fetchAdminMessages, 4000);
                    setInterval(fetchAdminTongzhi, 5000);
                    setInterval(refreshHotPeople, 5000);
                    document.getElementById('message').focus();
                }
            }
            xhr.send('action=enterChat&nickname=' + encodeURIComponent(nickname));
        }

        function sendMessage() {
            message = document.getElementById('message').value;
            if (message) {
                if (message.length > 100) {
                    message = message.slice(0, 100) + '...(输入过长)';
                }
                if (sensitiveRegex.test(message)) {
                    message = '包含敏感词...';
                }
                if (nickname === '管理员') {
                    nickname = '假的管理员'
                }
                doSendMessage(message, nickname)
            }
            document.getElementById('message').focus();
            document.getElementById('message').rows = 1;
        }

        function doSendMessage(message, nickname) {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'chat.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            document.getElementById('message').value = '';
            document.getElementById('messages').insertAdjacentHTML('beforeend', nickname + ': '  + message);
            xhr.send('action=sendMessage&nickname=' + encodeURIComponent(nickname) + '&message=' + encodeURIComponent(message));
            fetchMessages();
        }

        function fetchMessages() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'chat.php?action=fetchMessages', true);
            xhr.onload = function () {
                if (this.status === 200) {
                    nowMessage = this.responseText;
                    if (nowMessage !== lastMessage) {
                        document.getElementById('messages').innerHTML = nowMessage;
                        scrollToBottom();
                        lastMessage = nowMessage;
                    }
                }
            }
            xhr.send();
        }

        function fetchAdminMessages() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'chat.php?action=fetchAdminMessages', true);
            xhr.onload = function () {
                if (this.status === 200) {
                    document.getElementById('adminMessages').innerHTML = this.responseText;
                    scrollToBottom();
                }
            }
            xhr.send();
        }

        function fetchAdminTongzhi() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'chat.php?action=fetchAdminTongzhi', true);
            xhr.onload = function () {
                if (this.status === 200) {
                    document.getElementById('adminTongzhi').innerHTML = this.responseText;
                    scrollToBottom();
                }
            }
            xhr.send();
        }


        function refreshHotPeople() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'chat.php?action=refreshHotPeople', true);
            xhr.onload = function () {
                if (this.status === 200) {
                    hotPeople = this.responseText;
                    document.getElementById('hotPeople').innerHTML = hotPeople;
                }
            }
            xhr.send();
        }

        function checkNickname() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'chat.php?action=checkNickname', true);
            xhr.onload = function () {
                if (this.status === 200) {
                    nickname = this.responseText;
                    if (nickname) {
                        doEnterChat(nickname, 'back');
                    }
                }
            }
            xhr.send();
        }

    </script>

    <style>
        /* 鼠标悬停时的样式 */
        button:hover {
            cursor: pointer; /* 鼠标变成手形 */
            background-color: deepskyblue; /* 移入时的背景颜色 */
        }

        /* 鼠标点击时的样式 */
        button:active {
            background-color: darkblue; /* 点击时的背景颜色 */
        }
        .weui-btn {
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>

<div class="page" id="chatroom_page" style="display:none; ">
    <div class="weui-cells__group" style="height: 90vh; width: min(600px, 90%); margin: 30px auto">
        <!-- 置顶显示热度 -->
        <div id="topHotBox" style="height: 3%; margin: 5px; padding: 10px; color: cornflowerblue">
            <span>热度值：</span><span id="hotPeople">0</span><span>人（表示累计进入人次）</span>
        </div>
        <!-- 全部消息内容框 -->
        <div id="adminChatBox" style="height: 3%; overflow-y: auto; border: 1px solid cornflowerblue; margin: 5px; padding: 10px;">
            <div id="adminMessages" style="overflow-wrap: break-word; word-wrap: break-word; white-space: normal; color: cornflowerblue"></div>
        </div>
        <div id="adminTongzhiBox" style="height: 20%; overflow-y: auto; border: 1px solid forestgreen; margin: 5px; padding: 10px;">
            <div rows="1" id="adminTongzhi" style="overflow-wrap: break-word; word-wrap: break-word; white-space: normal; color: forestgreen"></div>
        </div>
        <!-- 全部消息内容框 -->
        <div id="chatBox" style="height: 45%; overflow-y: auto; border: 1px solid #b2c4cb; margin: 5px; padding: 10px;">
            <div id="messages" style="overflow-wrap: break-word; word-wrap: break-word; white-space: normal;"></div>
        </div>
        <!-- 全部消息内容框 -->
        <div id="sendBox" style="display: flex; align-items: flex-end; height: auto; justify-content: space-between; padding: 5px;">
                <textarea id="message" rows="1" class="weui-input" placeholder="发送的消息" required
                          onfocus="scrollToBottom()" oninput="scrollToBottom()"
                          style="width: 100%; height:auto; line-height: 20px; padding: 10px; margin: 0; border: 1px solid #b7c5cb; overflow-y:hidden; resize: none; font-size: 16px"></textarea>

            <div class="container" style="margin-left: 5px; padding-left: 5px; margin-bottom: 1px; padding-bottom: 1px">
                <button id="sendMessageBtn" onclick="sendMessage()"
                        class="weui-btn weui-btn_primary"
                        style="width: 70px; padding: 6px 2px">发送</button>
            </div>
        </div>
    </div>
</div>

<div id="nickname_page" class="page">
    <div class="weui-form" style="height: 80vh; width: min(600px, 90%); margin: 10px auto">
        <div class="weui-form__bd">
            <div class="weui-form__text-area">
                <h2 class="weui-form__title">闪客的聊天室</h2>
                <div class="weui-form__desc" style="color: cornflowerblue">仅限今天：20240328</div>
            </div>
            <div class="weui-form__control-area">
                <div class="weui-cells__group weui-cells__group_form">
                    <div class="weui-cells">
                        <label for="nickInput" class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd"><span class="weui-label">你的昵称</span></div>
                            <div class="weui-cell__bd">
                                <input id="nickInput" class="weui-input" placeholder="请填写昵称"></input>
                            </div>
                        </label>
                        <label for="source" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
                            <div class="weui-cell__hd">
                                <span class="weui-label">来源</span>
                            </div>
                            <div class="weui-cell__bd">
                                <select class="weui-select" name="select2" id="source">
                                    <option value="1">不想告诉你</option>
                                    <option value="1">公众号</option>
                                    <option value="2">知识星球</option>
                                    <option value="3">其他的</option>
                                </select>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="weui-form__ft">
            <div class="weui-form__opr-area">
                <button onclick="enterChat()" class="weui-btn weui-btn_primary">确定</button>
            </div>
        </div>
    </div>

</div>

</body>

</html>

